<template>
    <div class="tableContainer__a9G2S">
        <el-table :data="tableData" header-row-class-name="customHeader"
            :header-cell-style="{color:'#09fff9',fontWeight:'500'}" style="width: 100%" v-if="tableData.length">
            <el-table-column label="工单编号" show-overflow-tooltip min-width="110">
                <template slot-scope="scope">
                    <div class="delay">
                        <img v-if="scope.row.isDelay == 1" src="@/assets/farmBoard/KB_delay.svg" alt="">
                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
                            :title="scope.row.code">{{scope.row.code}}</span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="工单状态" width="70">
                <template slot-scope="scope">
                    <span :class="['iconBorder',dynamicClass]">
                        {{scope.row.stateName}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="产品编号" show-overflow-tooltip min-width="100">
                <template slot-scope="scope">
                    {{scope.row.productCode}}
                </template>
            </el-table-column>
            <el-table-column label="产品名称">
                <template slot-scope="scope">
                    {{scope.row.productName}}
                </template>
            </el-table-column>
            <el-table-column label="产品规格" width="70">
                <template slot-scope="scope">
                    {{scope.row.productSpecification || '-'}}
                </template>
            </el-table-column>
            <el-table-column label="计划数">
                <template slot-scope="scope">
                    {{scope.row.planedNumber}}
                </template>
            </el-table-column>
            <el-table-column label="实际数">
                <template slot-scope="scope">
                    {{scope.row.actualNumber}}
                </template>
            </el-table-column>
        </el-table>
        <img v-if="!tableData.length" src="@/assets/farmBoard/KB_noContent.png" alt="" class="empty__vq2hK">
    </div>
</template>

<script>
    import {
        workOrderOverview
    } from '@/api/dataController'
    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,
                intervalIndex: 1,
                todayEndTimer: null,
                allIngTimer: null,
            }
        },
        props:['targetTimer','dynamicClass'],
        methods: {
            handleTableInterval(res, timer) {
                const pageSize = 7
                const intervalTime = 10000
                const pageCount = this.utils.countPage(res.length, pageSize)
                this.tableData = res.slice((this.intervalIndex - 1) * pageSize, this.intervalIndex * pageSize)
                if (pageCount == 0) { //空
                    this.tableData = []
                } else if (pageCount > 1) {
                    clearInterval(this[timer])
                    this[timer] = setInterval(() => {
                        ++this.intervalIndex
                        if (pageCount < this.intervalIndex) {
                            this.intervalIndex = 1
                        }
                        this.tableData = res.slice((this.intervalIndex - 1) * pageSize, this
                            .intervalIndex * pageSize)
                    }, intervalTime)
                } else if (pageCount == 1) { //只有一页
                    this.tableData = res
                }
                this.$emit('intervalFn',{timerName:this.targetTimer,pageCount,intervalTime})
            },
            getWorkOrderOverview: async function (data) {
                const res = await workOrderOverview(data)
                if (res.code == 200) this.handleTableInterval(res.data, this.targetTimer)
            }
        },
        beforeRouteLeave(to, from, next) {
            clearInterval(this.todayEndTimer)
            clearInterval(this.allIngTimer)
            next()
        }
    }
</script>

<style lang="less" scoped>
    .tableContainer__a9G2S {
        position: relative;
        height: calc(100% - 30px);
        overflow: hidden;
        padding-top: 8px;

        /deep/ .el-table {
            background-color: transparent;
            border: 1px solid #fff;
            color: #fff;
            font-size: 12px;

            .delay {
                display: flex;
                align-items: center;

                img {
                    width: 24px;
                    margin-right: 4px;
                }
            }

            .iconBorder {
                border-radius: 2px;
                padding: 2px
            }

            .end {
                border: 1px solid rgb(251, 101, 131);
                color: rgb(251, 101, 131)
            }

            .ing {
                border: 1px solid rgb(124, 252, 178);
                color: rgb(124, 252, 178)
            }
        }

        /deep/ .el-table__header-wrapper {
            .customHeader {
                background: transparent;

                th {
                    padding: 0;
                    font-size: 12px;
                    border-right: 1px solid #fff;
                    background-color: transparent;
                    border-bottom: 1px solid rgba(9, 255, 249, 0.4);
                    background-color: rgba(9, 255, 249, 0.4);
                }
            }
        }

        /deep/ .el-table__body {
            tr {
                background-color: transparent;

                td {
                    padding: 4px 0;
                    border: none;
                }
            }

            tr:nth-child(odd) {
                background-color: rgba(0, 0, 0, .15);
            }
        }

        ::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
            background-color: rgba(140, 182, 222, 0.3);
        }

        .empty__vq2hK {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            width: 160px;
        }
    }
</style>